<template>
  <div class="message-center-container">
    <div class="page-header">
      <h2>消息中心</h2>
      <button class="btn-primary" @click="markAllAsRead">全部已读</button>
    </div>
    
    <div class="message-tabs">
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane label="全部消息" name="all">
          <div class="message-list">
            <div v-for="message in messages" :key="message.id" :class="['message-item', { 'unread': !message.read }]" @click="viewMessage(message.id)">
              <div class="message-header">
                <span class="message-title">{{ message.title }}</span>
                <span class="message-time">{{ message.time }}</span>
              </div>
              <div class="message-content">{{ message.content }}</div>
              <div class="message-footer">
                <span class="message-type">{{ message.typeText }}</span>
                <span class="message-sender">{{ message.sender }}</span>
              </div>
            </div>
            
            <div v-if="messages.length === 0" class="no-message">
              暂无消息
            </div>
          </div>
          
          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="未读消息" name="unread">
          <div class="message-list">
            <div v-for="message in messages.filter(m => !m.read)" :key="message.id" class="message-item unread" @click="viewMessage(message.id)">
              <div class="message-header">
                <span class="message-title">{{ message.title }}</span>
                <span class="message-time">{{ message.time }}</span>
              </div>
              <div class="message-content">{{ message.content }}</div>
              <div class="message-footer">
                <span class="message-type">{{ message.typeText }}</span>
                <span class="message-sender">{{ message.sender }}</span>
              </div>
            </div>
            
            <div v-if="messages.filter(m => !m.read).length === 0" class="no-message">
              暂无未读消息
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="系统通知" name="system">
          <div class="message-list">
            <div v-for="message in messages.filter(m => m.type === 1)" :key="message.id" :class="['message-item', { 'unread': !message.read }]" @click="viewMessage(message.id)">
              <div class="message-header">
                <span class="message-title">{{ message.title }}</span>
                <span class="message-time">{{ message.time }}</span>
              </div>
              <div class="message-content">{{ message.content }}</div>
              <div class="message-footer">
                <span class="message-type">{{ message.typeText }}</span>
                <span class="message-sender">{{ message.sender }}</span>
              </div>
            </div>
            
            <div v-if="messages.filter(m => m.type === 1).length === 0" class="no-message">
              暂无系统通知
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="测试通知" name="test">
          <div class="message-list">
            <div v-for="message in messages.filter(m => m.type === 2)" :key="message.id" :class="['message-item', { 'unread': !message.read }]" @click="viewMessage(message.id)">
              <div class="message-header">
                <span class="message-title">{{ message.title }}</span>
                <span class="message-time">{{ message.time }}</span>
              </div>
              <div class="message-content">{{ message.content }}</div>
              <div class="message-footer">
                <span class="message-type">{{ message.typeText }}</span>
                <span class="message-sender">{{ message.sender }}</span>
              </div>
            </div>
            
            <div v-if="messages.filter(m => m.type === 2).length === 0" class="no-message">
              暂无测试通知
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="审批通知" name="approval">
          <div class="message-list">
            <div v-for="message in messages.filter(m => m.type === 3)" :key="message.id" :class="['message-item', { 'unread': !message.read }]" @click="viewMessage(message.id)">
              <div class="message-header">
                <span class="message-title">{{ message.title }}</span>
                <span class="message-time">{{ message.time }}</span>
              </div>
              <div class="message-content">{{ message.content }}</div>
              <div class="message-footer">
                <span class="message-type">{{ message.typeText }}</span>
                <span class="message-sender">{{ message.sender }}</span>
              </div>
            </div>
            
            <div v-if="messages.filter(m => m.type === 3).length === 0" class="no-message">
              暂无审批通知
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <!-- 消息详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="消息详情" width="600px">
      <div v-if="selectedMessage" class="message-detail">
        <h3>{{ selectedMessage.title }}</h3>
        <div class="message-detail-meta">
          <span>发送人: {{ selectedMessage.sender }}</span>
          <span>时间: {{ selectedMessage.time }}</span>
          <span>类型: {{ selectedMessage.typeText }}</span>
        </div>
        <div class="message-detail-content">
          {{ selectedMessage.content }}
        </div>
        <div v-if="selectedMessage.relatedUrl" class="message-detail-actions">
          <el-button type="primary" @click="goToRelatedUrl">前往相关页面</el-button>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MessageCenter',
  data() {
    return {
      activeTab: 'all',
      messages: [],
      selectedMessage: null,
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchMessages()
  },
  methods: {
    async fetchMessages() {
      try {
        // 这里应该调用后端API获取消息列表
        // 暂时使用模拟数据
        this.messages = [
          {
            id: 1,
            title: '系统更新通知',
            content: '测试管理平台将于2023年5月25日22:00-24:00进行系统升级维护，期间平台将暂时无法使用，请提前做好准备。',
            type: 1,
            typeText: '系统通知',
            sender: '系统管理员',
            time: '2023-05-20 10:00:00',
            read: false,
            relatedUrl: null
          },
          {
            id: 2,
            title: '测试申请审批通知',
            content: '您提交的测试申请单(编号：AP20230520001)已通过平台管理员审批，请前往测试申请管理页面查看详情。',
            type: 3,
            typeText: '审批通知',
            sender: '平台管理员',
            time: '2023-05-20 09:30:00',
            read: false,
            relatedUrl: '/applications/detail/AP20230520001'
          },
          {
            id: 3,
            title: '测试任务完成通知',
            content: '您创建的测试任务(编号：TEST20230519001)已完成执行，测试通过率为92.5%。',
            type: 2,
            typeText: '测试通知',
            sender: '测试系统',
            time: '2023-05-19 16:45:00',
            read: true,
            relatedUrl: '/test/detail/TEST20230519001'
          },
          {
            id: 4,
            title: '新增缺陷通知',
            content: '测试人员王五在产品A测试过程中发现了1个致命缺陷和3个一般缺陷，请及时处理。',
            type: 2,
            typeText: '测试通知',
            sender: '测试系统',
            time: '2023-05-18 14:20:00',
            read: true,
            relatedUrl: '/defect/list?productId=1&severity=1,3'
          },
          {
            id: 5,
            title: '账号登录提醒',
            content: '您的账号于2023年5月18日08:30:00在新设备上登录，如果不是您本人操作，请及时修改密码。',
            type: 1,
            typeText: '系统通知',
            sender: '系统安全',
            time: '2023-05-18 08:35:00',
            read: true,
            relatedUrl: '/user/security'
          },
          {
            id: 6,
            title: '测试用例审核通知',
            content: '您提交的测试用例集(名称：产品B登录功能测试用例)已通过审核，可以在测试用例管理页面查看。',
            type: 3,
            typeText: '审批通知',
            sender: '测试负责人',
            time: '2023-05-17 11:20:00',
            read: true,
            relatedUrl: '/testcase/detail?name=产品B登录功能测试用例'
          }
        ]
        
        this.total = this.messages.length
      } catch (error) {
        this.$message.error('获取消息列表失败')
      }
    },
    viewMessage(id) {
      // 查找选中的消息
      this.selectedMessage = this.messages.find(message => message.id === id)
      
      // 标记为已读
      if (this.selectedMessage && !this.selectedMessage.read) {
        this.selectedMessage.read = true
        this.$message.success('消息已标记为已读')
      }
      
      // 显示详情弹窗
      this.dialogVisible = true
    },
    markAllAsRead() {
      this.$confirm('确定要将所有消息标记为已读吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.messages.forEach(message => {
          message.read = true
        })
        this.$message.success('全部消息已标记为已读')
      })
    },
    goToRelatedUrl() {
      if (this.selectedMessage && this.selectedMessage.relatedUrl) {
        // 跳转到相关页面
        this.$router.push(this.selectedMessage.relatedUrl)
        this.dialogVisible = false
      }
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.fetchMessages()
    },
    handleCurrentChange(current) {
      this.currentPage = current
      this.fetchMessages()
    }
  }
}
</script>

<style scoped>
.message-center-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn-primary {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-default {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.message-tabs {
  flex: 1;
}

.message-list {
  padding: 20px 0;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.message-item {
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: background-color 0.3s;
}

.message-item:hover {
  background-color: #f5f7fa;
}

.message-item.unread {
  background-color: #ecf5ff;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.message-title {
  font-weight: 500;
  font-size: 16px;
}

.message-time {
  color: #909399;
  font-size: 12px;
}

.message-content {
  color: #606266;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.6;
}

.message-footer {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 12px;
}

.no-message {
  text-align: center;
  padding: 50px 0;
  color: #909399;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.message-detail h3 {
  margin: 0 0 15px 0;
  font-size: 20px;
}

.message-detail-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  color: #909399;
  font-size: 14px;
}

.message-detail-content {
  line-height: 1.8;
  color: #303133;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 10px 0;
}

.message-detail-actions {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
}
</style>